<!-- 关注与粉丝 -->
<template>
	<view class="page">
		<u-tabs :list="list" :is-scroll="false" font-size="32" :current="current" @change="change"></u-tabs>
		<view class="list" style="height: calc(100vh - 80rpx - env(safe-area-inset-bottom));">
			<swiper class="swiper" :current="current" style="height: 100%;" @change="chan">
				<swiper-item class="swiper-item" style="height: 100%;">
					<scroll-view scroll-y="true" class="card" style="height: 100%;" @scrolltolower="scrollToLower1">
						<view class="none" v-if="focous.length == 0">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
							<view class="txt">这里空空如也</view>
						</view>
						<view class="item" v-for="item in focous" :key="item.userId">
							<view class="left flex">
								<view class="icon flex justify-center align-center flex-shrink">
									<image :src="item.avatar" mode=""></image>
								</view>
								<view class="cent flex justify-between flex-column">
									<view class="top flex justify-between">
										<view class="le flex">
											<text class="name text-ellipsis1">
												{{item.nickname}}
											</text>
											<view class="vip">
												<image :src="item.gradeImage" mode=""></image>
											</view>
										</view>
										<view class="rights flex justify-center align-center" v-if="!item.type" @click="guanzhu(item.userId)">
											<view class="txt">
												已关注
											</view>
										</view>
										<view class="right flex justify-center align-center" v-if="item.type" @click="guanzhu(item.userId)">
											<view class="icon flex justify-center align-center">
												<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/guanzhu.png" mode="">
												</image>
											</view>
											<view class="tx">
												关注
											</view>
										</view>
									</view>
									<view class="bom text-ellipsis1">
										{{item.userMotto}}
									</view>
								</view>
							</view>
						</view>
						<view class="notice flex justify-center align-center">
							<view class="let">
								去圈子逛逛，关注更多的人！
							</view>
							<view class="rig" @click="link">
								立即前往
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;">
					<scroll-view scroll-y="true" class="card" style="height: 100%;" @scrolltolower="scrollToLower2">
						<view class="none" v-if="fans.length == 0">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
							<view class="txt">这里空空如也</view>
						</view>
						<view class="item" v-for="item in fans" :key="item.userId">
							<view class="left flex">
								<view class="icon flex justify-center align-center flex-shrink">
									<image :src="item.avatar" mode=""></image>
								</view>
								<view class="cent flex justify-between flex-column">
									<view class="top flex justify-between">
										<view class="le flex">
											<text class="name text-ellipsis1">
												{{item.nickname}}
											</text>
											<view class="vip">
												<image :src="item.gradeImage" mode=""></image>
											</view>
										</view>
										<view v-if="item.type" class="huguan flex justify-center align-center" @click="guanzhu(item.userId)">
											<view class="icons">
												<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/square/huguan.png" mode=""></image>
											</view>
											<view class="text">
												互相关注
											</view>
										</view>
										<view v-if="!item.type" class="right flex justify-center align-center" @click="guanzhu(item.userId)">
											<view class="icons flex justify-center align-center">
												<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/square/%E6%96%B0%E5%A2%9E.png" mode=""></image>
											</view>
											<view class="tx">
												关注
											</view>
										</view>
									</view>
									<view class="bom text-ellipsis1">
										{{item.userMotto}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 访客 -->
				<swiper-item class="swiper-item" style="height: 100%;">
					<scroll-view scroll-y="true" class="card" style="height: 100%;" @scrolltolower="scrollToLower3">
						<view class="none" v-if="visit.length == 0">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
							<view class="txt">这里空空如也</view>
						</view>
						<view class="item" v-for="item in visit" :key="item.userId">
							<view class="left flex">
								<view class="icon flex justify-center align-center flex-shrink">
									<image :src="item.avatar" mode=""></image>
								</view>
								<view class="cent flex justify-between flex-column">
									<view class="top flex justify-between">
										<view class="le flex">
											<text class="name text-ellipsis1">
												{{item.nickname}}
											</text>
											<view class="vip">
												<image :src="item.gradeImage" mode=""></image>
											</view>
										</view>
										<!-- <view class="rights flex justify-center align-center" v-if="!item.type" @click="guanzhu(item.userId)">
											<view class="txt">
												已关注
											</view>
										</view>
										<view class="right flex justify-center align-center" v-if="item.type" @click="guanzhu(item.userId)">
											<view class="icon flex justify-center align-center">
												<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/guanzhu.png" mode="">
												</image>
											</view>
											<view class="tx">
												关注
											</view>
										</view> -->
									</view>
									<view class="bom text-ellipsis1">
										{{getTimer(item.createDate)}}访问了你
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 获赞 -->
				<swiper-item class="swiper-item" style="height: 100%;">
					<scroll-view scroll-y="true" class="card" style="height: 100%;" @scrolltolower="scrollToLower4">
						<view class="none" v-if="zan.length == 0">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
							<view class="txt">这里空空如也</view>
						</view>
						<view class="item" v-for="item in zan" :key="item.userId">
							<view class="left flex">
								<view class="icon flex justify-center align-center flex-shrink">
									<image :src="item.avatar" mode=""></image>
								</view>
								<view class="cent flex justify-between flex-column">
									<view class="top flex justify-between">
										<view class="le flex">
											<text class="name text-ellipsis1">
												{{item.nickname}}
											</text>
											<view class="vip">
												<image :src="item.gradeImage" mode=""></image>
											</view>
										</view>
										<!-- <view class="rights flex justify-center align-center" v-if="!item.type" @click="guanzhu(item.userId)">
											<view class="txt">
												已关注
											</view>
										</view>
										<view class="right flex justify-center align-center" v-if="item.type" @click="guanzhu(item.userId)">
											<view class="icon flex justify-center align-center">
												<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/guanzhu.png" mode="">
												</image>
											</view>
											<view class="tx">
												关注
											</view>
										</view> -->
									</view>
									<view class="bom text-ellipsis1">
										{{getTimer(item.createDate)}}点赞了你
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		focous
	} from '@/data/my.js'
	export default {
		data() {
			return {
				current: 0,
				list: [{
					name: '关注'
				}, {
					name: '粉丝'
				},{
					name: '访客'
				},{
					name: '获赞'
				}],
				focous:[],
				fans:[],
				visit:[],
				zan:[],
				guanzhuQurey:{
					userId:''
				},
				focusQurey:{
					pageNum:1,
					pageSize:10,
					type:0
				},
				fansQurey:{
					pageNum:1,
					pageSize:10,
					type:1
				},
				visitQurey:{
					pageNum:1,
					pageSize:10,
					type:2
				},
				zanQurey:{
					pageNum:1,
					pageSize:10,
					type:3
				}
			}
		},
		onLoad(e) {
			console.log(e.id)
			this.current = e.id
			this.getFoucs()
			this.getFans()
			this.getVist()
			this.getZan()
		},
		methods: {
			//tabs切换事件
			change(e) {
				this.current = e
			},
			scrollToLower1(){
				this.focusQurey.pageNum++
				this.getFoucs()
			},
			scrollToLower2(){
				this.fansQurey.pageNum++
				this.getFans()
			},
			scrollToLower3(){
				this.visitQurey.pageNum++
				this.getVist()
			},
			scrollToLower4(){
				this.zanQurey.pageNum++
				this.getZan()
			},
			//滑动事件
			chan(e) {
				console.log(e)
				this.current = e.detail.current
			},
			//前往圈子
			link(){
				uni.switchTab({
					url:'/pages/circle/circle'
				})
			},
			//获取数据
			async getFoucs(){
				let {data: focus,code} = await this.$get('/user/attentionAndFans',this.focusQurey)
				if(code == 200){
					this.focous = this.focous.concat(focus.records) 
				}
			},
			async getFans(){
				let {data: fans,code} = await this.$get('/user/attentionAndFans',this.fansQurey)
				if(code == 200){
					this.fans = this.fans.concat(fans.records) 
				}
			},
			async getVist(){
				let {data: visit,code} = await this.$get('/user/attentionAndFans',this.visitQurey)
				if(code == 200){
					this.visit = this.visit.concat(visit.records) 
				}
			},
			async getZan(){
				let {data: zan,code} = await this.$get('/user/attentionAndFans',this.zanQurey)
				if(code == 200){
					this.zan = this.zan.concat(zan.records) 
				}
			},
			//关注
			guanzhu(id) {
				this.guanzhuQurey.userId = id
				this.$post('/user/addAttention',this.guanzhuQurey)
				this.focous.forEach((item,index)=>{
					if(item.userId == id){
						this.focous[index].type = !this.focous[index].type
					}
				})
				this.fans.forEach((item,index)=>{
					if(item.userId == id){
						this.fans[index].type = !this.fans[index].type
					}
				})
			},
			getTimer(timer) {
			  
			  let nowe = new Date();  // 当前的系统时间
			  let oldtime = new Date(timer);   //目标时间
			  let t_day = oldtime.getDate();
			  let t_year = oldtime.getFullYear();
			  let t_month = oldtime.getMonth() + 1;
			  let t_hour = oldtime.getHours();
			  let t_minute = oldtime.getMinutes();
			  if (t_hour<10){
			    t_hour = '0' + t_hour
			  }
			  if (t_minute < 10) {
			    t_minute = '0' + t_minute
			  }
			  let n_year = nowe.getFullYear();
			  let n_month = nowe.getMonth() + 1;
			  let n_day = nowe.getDate();
			  let mistiming = nowe - oldtime; // 计算出当前时间，与目标时间的时间差
			  if (t_year == n_year) {
			    if (n_month == t_month) {
			      //  在同一月  
				  console.log(n_day, t_day)
			      if (n_day - t_day == 1) {
			        // 差等于1 昨天 + 时分
					console.log('昨天' + ' ' + t_hour + ':' + t_minute)
			        return '昨天' + ' ' + t_hour + ':' + t_minute
			      } else if (n_day - t_day == 0) {
			        // 显示 时分
					console.log( t_hour + ':' + t_minute)
			        return t_hour + ':' + t_minute
			      } else {
					console.log(t_month + '月' + t_day + '日' +t_hour + ':' + t_minute)
			        return t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
			      }
			    }else {
					console.log(t_month + '.' + t_day)
					return t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
				}
			  } else {
			    //跨年了  显示 年 月 日 
				console.log(t_year + '.' + t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute)
			    return t_year + '年' + t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
			  }
			},
			//粉丝关注
			// fguanzhu(id){
			// 	this.guanzhuQurey.userId = id
			// 	this.$post('/user/addAttention',this.guanzhuQurey)
			// 	this.fans.forEach((item,index)=>{
			// 		if(item.userId == id){
			// 			this.fans[index].type = !this.fans[index].type
			// 		}
			// 	})
			// },
			//发布动态
			linkre(){
				uni.navigateTo({
					url: '/pagesA/release/release'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		.list {
			.swiper {
				.swiper-item {
					.none{
						position: absolute;
						left:50%;
						top:50%;
						transform: translate(-57%,-50%);
						image{
							width: 250rpx;
							height: 250rpx;
						}
						.txt{
							padding-top: 40rpx;
							color: #999999;
							font-size: 24rpx;
							display: flex;
							justify-content: center;
						}
					}
					.card {
						padding: 15rpx 30rpx 0;

						.item {
							padding: 30rpx 0;
							border-top: 1rpx solid rgba(0, 0, 0, .12);
							position: relative;
							.left {
								.icon {
									width: 80rpx;
									height: 80rpx;
									margin-right: 20rpx;
									border-radius: 50%;
									overflow: hidden;
								}

								.cent {
									.top {
										.le {
											.name {
												font-weight: bold;
												color: #333333;
												font-size: 32rpx;
												margin-right: 20rpx;
												line-height: 1.2;
												max-width: 400rpx;
											}

											.vip {
												width: 40rpx;
												height: 40rpx;
											}
										}
										.huguan{
											position: absolute;
											right: 40rpx;
											.icons{
												width: 38rpx;
												height: 38rpx;
												margin-right: 13rpx;
											}
											.text{
												font-weight: 400;
												color: #0265EB;
												font-size: 28rpx;
											}
										}

										.right {
											width: 135rpx;
											height: 42rpx;
											border: 1rpx solid #6FACFF;
											border-radius: 21rpx;
											position: absolute;
											right: 40rpx;
											.icon {
												width: 20rpx;
												height: 21rpx;
												margin-right: 10rpx;
											}
											.tx{
												font-weight: 400;
												color: #0265EB;
												font-size: 28rpx;
												line-height: 1;
											}
										}
										.rights {
											width: 135rpx;
											height: 42rpx;
											border: 1rpx solid #6FACFF;
											border-radius: 21rpx;
											position: absolute;
											background-color: #0265EB;
											right: 40rpx;
											.txt{
												font-weight: 400;
												color: #FFFFFF;
												font-size: 28rpx;
												line-height: 1;
											}
										}
									}

									.bom {
										font-family: PingFang SC;
										font-weight: 400;
										color: #999999;
										font-size: 28rpx;
										line-height: 1;
									}
								}
							}
						}

						.item:first-child {
							border-top: none;
						}
						.notice{
							margin: 100rpx 0;
							.let{
								font-weight: 400;
								color: #999999;
								font-size: 24rpx;
							}
							.rig{
								font-weight: 400;
								color: #0265EB;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
